最近get了一个神奇的知识~

视觉设计的小姐姐某天有一个想法，她只设计一版图标，需要前端在不同的场景展示不同颜色的图标，确实是高效的办法哈！但是对我的CSS知识来说超纲了[捂脸]…于是开始搜搜搜，发现了一些办法，而且这些办法都是使用filter这个神奇的属性！

drop-shadow滤镜可以给元素或图片非透明区域添加投影，对于背景透明的icon来说，投影当然就可以实现改颜色啦！

html:

css:

代码很简单：

1.filter: drop-shadow(投影颜色，x偏移量，y偏移量)；

这是filter: drop-shadow(#FF0000 0 32px)的效果，上面是原图，下面是投影

2.需要注意的就是需要设置容器overflow: hidden和元素本身transform: translateY(-64px)，只展示投影；

解决方案：https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/

这篇帖子里的最后一种方法对于想要实现图片变成指定颜色是比较适用的：

但是这个写法确实是不太容易理解原理，哈哈。不过文章中给出了工具可以计算出颜色代码对应的矩阵，还是很好用的！不过这个办法有一个限制，就是原图片必须是白色或者黑色的，工具计算出来的矩阵才能实现预期的颜色。